<script setup>

import {ref} from 'vue'
import {useRouter} from 'vue-router'
import {Search} from '@element-plus/icons-vue'
// 收集搜索关键字
import {reqHospitalInfo} from '@/api/home'

const router = useRouter()
const hosname = ref('')
const fetchData = async (keyword, cb) => {
  const res = await reqHospitalInfo(keyword);
  // 下拉组件显示数据
  const showData = res.data.map(item => {
    return {
      value: item.hosname,
      hoscode: item.hoscode,
    }
  })
  cb(showData)
}
//  点击搜索按钮跳转到详情页
const goDetail = (item) => {
  router.push({ path:'/hospital/register',query: { hoscode: item.hoscode }})
}

</script>

<template>
  <div class="search">
    <el-autocomplete
        @select="goDetail"
        :trigger-on-focus="false"
        clearable
        placeholder="请你输入医院名称"
        v-model="hosname"
        :fetch-suggestions="fetchData"
    />
    <el-button type="primary" size="default" :icon="Search">搜索</el-button>
  </div>
</template>

<style scoped lang="scss">
.search {
  //width: 100%;
  height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 10px 0px;

  ::v-deep(.el-input__wrapper) {
    width: 600px;
    margin-right: 10px;
  }
}
</style>